/**
在 Webpack 中，分包（code splitting）是一种将应用程序的代码拆分成多个小块的技术，以便按需加载。这种技术可以提高应用程序的加载速度和性能。
  1. 什么是入口起点？
  入口起点（Entry Point）是 Webpack 构建的起始点，它指定了 Webpack 应该从哪个文件开始构建依赖图。每个入口起点都可以生成一个或多个输出文件。

  2. 分包的目的
  - 提高性能: 通过按需加载代码，减少初始加载时的代码量，从而加快页面加载速度。
  - 优化用户体验: 只在需要时加载特定模块，减少不必要的资源消耗。
  - 支持懒加载: 在用户需要时动态加载代码，提升应用的响应速度。

  3. Webpack 中的入口配置
  在 Webpack 的配置文件中，可以通过  `entry`  属性来设置入口起点。可以使用字符串、数组或对象来定义多个入口。

   示例：
  const path = require('path');

  module.exports = {
      entry: {
          main: './src/index.js', // 单个入口
          vendor: './src/vendor.js' // 另一个入口
      },
      output: {
          filename: '[name].bundle.js', // 使用入口名称作为输出文件名
          path: path.resolve(__dirname, 'dist')
      }
  };
  4. 分包的实现方式
  Webpack 提供了几种方式来实现代码分包：

   1. 动态导入（Dynamic Imports）
  通过使用 ES6 的  `import()`  语法，可以实现懒加载。这种方式会在运行时加载模块，而不是在构建时。
  // 在需要时动态加载模块
  import('./module.js')
      .then(module => {
          // 使用加载的模块
          module.doSomething();
      });
   2. SplitChunksPlugin
  Webpack 的  `SplitChunksPlugin`  可以自动分析依赖关系，并将共享的模块提取到单独的文件中。
  module.exports = {
      // ...
      optimization: {
          splitChunks: {
              chunks: 'all', // 对所有类型的块进行分割
          },
      },
  };
  5. 入口起点与分包的关系
  - 多入口: 可以定义多个入口起点，每个入口起点可以生成一个独立的包。这适合大型应用，能够将不同功能模块分开，便于管理和加载。
  - 共享模块: 使用  `SplitChunksPlugin` ，可以将多个入口起点中共享的模块提取到一个公共包中，减少重复代码。

  6. 注意事项
  - 文件数量: 虽然分包可以提高性能，但过多的文件可能会导致请求数量增加，反而影响性能。因此需要合理规划分包策略。
  - 缓存策略: 分包后的文件可以利用浏览器缓存，设置合适的缓存策略可以进一步提升性能。

  总结
  Webpack 的分包和入口起点功能可以帮助开发者优化应用的加载性能和用户体验。通过合理配置入口起点和使用动态导入或  `SplitChunksPlugin` ，可以实现高效的代码分割，提升应用的响应速度和可维护性。希望这个总结对你理解 Webpack 的分包和入口起点有所帮助！
 */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: false,
  // entry: './src/index.js',
  entry: {
    index: {
      import: "./src/index.js",
      dependOn: "shared", // 依赖共享模块
    },
    main: {
      import: "./src/main.js",
      dependOn: "shared", // 依赖共享模块
    },
    shared: ["axios"], // 共享模块
  },
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "[name]-bundle.js",
    clean: true,
  },
  resolve: {
    extensions: [".js", ".json", ".wasm", ".jsx", ".ts"],
  },
  devServer: {
    static: ["public", "content"],
    port: 3000,
    compress: true,
    proxy: [
      {
        "/api": {
          target: "http://localhost:9000",
          pathRewrite: {
            "^/api": "",
          },
          changeOrigin: true, // 修改请求头中的host地址
        },
      },
    ],
    historyApiFallback: true, // 解决单页面应用刷新404问题
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.ts$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};
